import React, {useEffect, useState} from 'react';
import classes from './index.module.scss'
import {Affix, Avatar, Button, Card, Divider, Input, Popover, Skeleton, Tooltip} from "antd";
import {ShareAltOutlined, LikeOutlined, MessageOutlined, CopyOutlined} from "@ant-design/icons";
import Meta from "antd/es/card/Meta";
import {useLocation, useParams} from "react-router-dom";
import {reqArticleInfo, reqGetUsers} from "../../../../api/frontDesk/frontDeskApi";
import {useDispatch, useSelector} from "react-redux";
import {getCommentList} from "../../../../store/frontDesk/commentSlice";
import CommentList from "../../../../component/frontDesk/CommentList";


const ArticleContent = () => {
    const [top, setTop] = useState(10);
    const [loading, setLoading] = useState(true);

    const [users,setUsers]=useState([])

    //获取url的params参数
    const params = useParams()
    const {state} = useLocation()
    const [articleInfo, setArticleInfo] = useState({})

    //获取评论的数据
    const dispatch = useDispatch()
    const {commentList} = useSelector(state => state.comment)
    useEffect(() => {
        dispatch(getCommentList(params.id))
        getUsers()
        if (state !== null) {
            scroll()
            getArticle()
            setLoading(false)
            document.getElementById('comment-list').scrollIntoView({
                block: 'center',
                inline: 'center',
                behavior: 'smooth'
            })
        } else {
            setTimeout(() => {
                getArticle()
                setLoading(false)
            }, 200)
        }
    }, [])
    //获取文章的详情
    const getArticle = async (id) => {
        id = params.id
        const {article} = await reqArticleInfo(id)
        setArticleInfo(article)
    }
    //获取用户详情
    const getUsers = async () => {
        const {data} = await reqGetUsers()
        setUsers(data)
    }

    //点赞按钮
    const good = () => {
        setTop(top + 10)
    }

    //滚动事件
    const scroll = () => {
        console.log(1)
        document.getElementById('comment-list').scrollIntoView({
            block: 'center',
            inline: 'center',
            behavior: 'smooth'
        })
    }
    const message = () => {
        setTop(top + 10)
        scroll()
    }

    let {href} = window.location
    const share = async () => {
        try {
            console.log(origin)
            navigator.clipboard.writeText(`${href}`)
            href = await navigator.clipboard.readText();
        } catch (err) {
            console.error('Failed to read clipboard contents: ', err);
        }
    }
    const content = (
        <div>
            <Input style={{width: 200}} defaultValue={href}/>
            <Tooltip title="复制链接">
                <Button onClick={share} icon={<CopyOutlined/>}/>
            </Tooltip>
        </div>
    );
    return (
        <div>
            <div className={classes.ArticleContent}>
                {/*左侧的固钉*/}
                <Affix className={classes.Affix} offsetTop={top}>
                    <div>
                        <Button style={{height: 50, width: 50, borderRadius: "50%"}}
                                onClick={good}>
                            <LikeOutlined/>
                            <div style={{position: "absolute", top: 0, right: 12}}>{articleInfo.praise}</div>
                        </Button>
                        <Button style={{height: 50, width: 50, borderRadius: "50%"}}
                                onClick={message}>
                            <MessageOutlined/>
                        </Button>
                        <Popover content={content} title="分享网页链接">
                            <Button className={classes.Share}>
                                <ShareAltOutlined/>
                            </Button>
                        </Popover>
                    </div>
                </Affix>
                <div className={classes.ContentContainer}>
                    {/*中间文章内容*/}
                    <h1 className={classes.ContentTitle}>{articleInfo.title}</h1>
                    <Card bordered={false}>
                        {/*文章作者信息*/}
                        <Skeleton className={classes.WriterInfo} loading={loading} avatar active>
                            <Meta
                                avatar={<Avatar src={articleInfo.author_avatar}/>}
                                title={articleInfo.author_name}
                                description={articleInfo.describe}
                            />
                        </Skeleton>
                        {/*文章内容*/}
                        <div className={classes.Content}>
                            <div dangerouslySetInnerHTML={{__html:articleInfo.content}}></div>
                        </div>
                    </Card>
                </div>
                {/* 右侧作者面板*/}
                <div className={classes.AuthorBlock}>
                    <div className={classes.AuthorInfo}>
                        <Avatar src={articleInfo.author_avatar} size={55}></Avatar>
                        <span>{articleInfo.author_name}</span>
                    </div>
                    <Divider className={classes.Divider}/>
                    <div className={classes.AuthorBtn}>
                        <Button type="primary">关注</Button>
                        <Button>私信</Button>
                    </div>
                </div>
            </div>
            {/*评论区域*/}
            <div id="comment-list"  style={{paddingBottom: 100}}>
                <CommentList users={users} commentList={commentList}/>
            </div>
        </div>
    );
};

export default ArticleContent;